<template>
  <view id="printMe"  class="warp_box">
    <view class="yihang">
      <view class="x1">
        <img src="../../static/chuku/title_border.png" alt="" />
        <text>客户</text></view
      >
      <view class="x2">
        <text>张三</text> <img src="../../static/chuku/black_arrow.png" alt=""
      /></view>
    </view>
    <view class="content">
      <view
        v-show="info"
        v-for="(item, index) in canshu"
        :key="item.id"
        class="neironghang"
      >
        <view class="neironghangyihang">
          <view class="left">
            <img :src="`http://localhost:3006/${item.good.img}`" alt="" />
          </view>
          <view class="right">
            <view class="x1"> 货品名称：{{ item.good.name }} </view>
            <view class="x2">
              <text class="xx1">货品编号：{{ item.id }}</text>
              <text class="xx2">出：{{ item.num }}</text>
            </view>
          </view>
        </view>
        <view class="neironghangerhang">
          <view class=""> M码 </view>
          <view class=""> 价格：{{ item.good.price }} </view>
          <view class=""> </view>
        </view>
      </view>
    </view>
    <view class="sanhang">
      <view class="x1">
        <img src="../../static/chuku/title_border.png" alt="" />
        <text class="xx1"> 货品合计 </text>
      </view>
      <view class="x2">
        <text class="xx2"> {{ chuhuojiage }} </text>
      </view>
    </view>
    <view class="sanhang1">
      <view class="x1">
        <text> 开单人 </text>
      </view>
      <view class="x2">
        <text> 李思 </text>
      </view>
    </view>
    <view class="sanhang1">
      <view class="x1">
        <text> 开单日期 </text>
      </view>
      <view class="x2">
        <text> 2020-10-20 </text>
      </view>
    </view>
    <view class="sihang">
      <view class="x1">
        <img src="../../static/chuku/title_border.png" alt="" />
        <text> 备注 </text>
      </view>
      <textarea
        placeholder="请输入"
        name=""
        id=""
        cols="30"
        rows="10"
      ></textarea>
      <view @click="jixuchuku_fn" class="jixuchuku">
        <view> 继续<br />出库 </view>
      </view>
    </view>

    <view v-print="'#printMe'"  class="bottom">
		
		<uses-permission
		  android:name="android.permission.READ_EXTERNAL_STORAGE"
		/>
		<uses-permission
		  android:name="android.permission.WRITE_EXTERNAL_STORAGE"
		/>
      <button @click="dayin_fn">
        
        打印出库单
      </button>
    </view>
    <view class="bottom1">
      <view class="y1">修改</view>
      <view class="y2">复制</view>
      <view class="y3">删除</view>
    </view>
  </view>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      info: false,
      canshu: "",
      chuhuoshulaing: "",
      chuhuojiage: "",
    };
  },
  methods: {
    dayin_fn() {
		alert("11111")
		// alert(window.print)
		
		// window.print()
      // print();
	  
	  
	  //  var h = window.open("Print_window", "_blank");
	  //                         h.document.write("11111");
	  //                         h.document.close();
							  
	  //                         h.print();
			// 				  h.close()
	  
   //    const printPdf = uni.requireNativePlugin("YanYu-PrintPDF");
	  // alert(uni.requireNativePlugin("YanYu-PrintPDF"))
   //    var filePath = "/test.pdf"; //pdf文件所在路径
   //    printPdf.managerPrint(filePath);
	  
	  
	  
      uni.removeStorage({
        key: "storage_key",
        success: function (res) {
          console.log("success");
        },
      });
    },
    jixuchuku_fn() {
      uni.navigateTo({
        url: "./chuangjianchukedan",
      });
    },
  },
  created() {
    try {
      const value = uni.getStorageSync("storage_key");
      if (value) {
        console.log(value);
        this.canshu = value;
        var num11 = 0;
        var zongjia11 = 0;
        for (let i = 0; i < value.length; i++) {
          num11 = num11 + value[i].num;
          zongjia11 = zongjia11 + value[i].zongjia;
        }
        this.chuhuoshulaing = num11;
        this.chuhuojiage = zongjia11;
      }
    } catch (e) {
      // error
    }
    if (this.canshu == "") {
      this.info = false;
    } else {
      this.info = true;
    }
  },
  mounted() {},
};
</script>
<style scoped lang="less">
.warp_box {
  padding: 0 30rpx;
  background-color: F9F9F9;
  .yihang {
    display: flex;
    height: 60rpx;
    line-height: 60rpx;
    justify-content: space-between;
    border-bottom: 1rpx solid #ddd;
    background-color: #fff;
    margin-top: 20rpx;
    .x1 {
      padding-right: 40rpx;
      text {
        font-size: 30rpx;
        font-weight: 700;
        padding-left: 20rpx;
      }
      img {
        width: 10rpx;
        height: 40rpx;
        vertical-align: middle;
      }
    }
    .x2 {
      padding-right: 40rpx;
      text {
        font-size: 24rpx;
        font-weight: 400;
        padding-right: 20rpx;
      }
      img {
        width: 16rpx;
        height: 30rpx;
        vertical-align: middle;
      }
    }
  }
  .neironghang {
    margin: 20rpx 0;
    .neironghangyihang {
      padding: 0 40rpx;
      display: flex;
      .left {
        width: 170rpx;
        height: 170rpx;
        background-color: red;
        img {
          width: 170rpx;
          height: 170rpx;
        }
      }

      .right {
        position: relative;
        margin-left: 20rpx;
        width: 400rpx;
        height: 170rpx;
        padding-top: 30rpx;
        .x2 {
          .xx1 {
            margin-right: 100rpx;
          }
        }
      }
    }

    .neironghangerhang {
      height: 80rpx;
      display: flex;
      justify-content: space-around;
      line-height: 80rpx;
      border-bottom: 1rpx solid #ddd;
      background-color: #fff;

      .x1 {
        display: inline-block;
        width: 80rpx;
        height: 30rpx;
        background-color: aquamarine;
      }
      .x2 {
        display: inline-block;
        width: 80rpx;
        height: 30rpx;
        background-color: rgb(204, 173, 173);
      }
      .x3 {
        display: inline-block;
        width: 80rpx;
        height: 30rpx;
        background-color: aquamarine;
      }
    }
  }
  .sanhang {
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #ddd;
    background-color: #fff;
    height: 60rpx;
    line-height: 60rpx;
    margin-top: 20rpx;
    .x1 {
      padding-right: 40rpx;
      .xx1 {
        font-size: 30rpx;
        font-weight: 700;
        padding-left: 20rpx;
      }
      img {
        width: 10rpx;
        height: 40rpx;
        vertical-align: middle;
      }
    }
    .x2 {
      padding-right: 40rpx;
      .xx2 {
        font-size: 24rpx;
        font-weight: 400;
        padding-right: 20rpx;
      }
    }
  }
  .sanhang1 {
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #ddd;
    background-color: #fff;
    height: 60rpx;
    line-height: 60rpx;
    .x1 {
      padding-left: 30rpx;
    }
    .x2 {
      padding-right: 60rpx;
    }
  }
  .sihang {
    position: relative;
    border-bottom: 1rpx solid #ddd;
    background-color: #fff;
    height: 400rpx;
    line-height: 60rpx;
    margin-top: 20rpx;
    .x1 {
      padding-right: 40rpx;
      text {
        font-size: 30rpx;
        font-weight: 700;
        padding-left: 20rpx;
      }
      img {
        width: 10rpx;
        height: 40rpx;
        vertical-align: middle;
      }
    }

    textarea {
      margin-top: 1rpx;
      width: 100%;

      background-color: #fff;
      border-radius: 15rpx;
      font-size: 24rpx;
      padding: 15rpx;
    }
    .jixuchuku {
      position: absolute;
      top: 180rpx;
      right: 0;
      width: 100rpx;
      height: 100rpx;
      background-color: #fccd05;
      border-radius: 50%;
      text-align: center;
      line-height: 45rpx;
      font-size: 30rpx;
      view {
        padding-top: 5rpx;
      }
    }
  }

  .bottom {
    width: 100%;
    // position: fixed;
    // // bottom: 0;
    // left: 0;
    button {
      font-weight: 700;
      width: 90%;
      background-color: #fccd05;
    }
  }
  .bottom1 {
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    justify-content: space-around;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    .y1 {
      background-color: #fcec03;
      flex: 1;
    }
    .y2 {
      background-color: #fccd05;
      flex: 1;
    }
    .y3 {
      background-color: #de0a09;
      flex: 1;
    }
  }
}
</style>
